$(function(){
	$('#btnSave').click(function(){
		if($('#preview').html().length < 1){
            alert('请先布局后再点保存');
            return;
        }

        if($(this).text() == '保 存'){
            if(page_id > 0){
                $('#btnSavePage').click();
            }else{
                $('#savePageModal').modal('show');
            }
        }else if($(this).text() == '预 览'){
            $('#imgQR').attr('src', '/file/qr?outtype=browser&content=' + base_url + '/mall/page?id=' + page_id);
            $('#qrcodeModal').modal('show');
        }
	});

	$('#btnSavePage').click(function(){
        if($('#preview').find('.list-group-item').length < 1){
            return;
        }
        var items = $('#preview').find('.list-group-item');
        var page = [];
        for (var i = 0; i < items.length; i++) {
            page[page.length] = {
                component_id: $(items[i]).attr('data-id'),
                identity: $(items[i]).attr('element-id'),
                params: localStorage.getItem($(items[i]).attr('element-id')),
                page_id: page_id,
                id: $(items[i]).attr('pc-id') ? $(items[i]).attr('pc-id') : 0
            };
        }

        $.post('/mall/admin/page/' + (page_id < 1 ? 'create' : ('edit/' + page_id)), 
            {
                'name': $('#page-name').val(),
                'details': JSON.stringify(page),
                'type': 'GOODS_LIST'
            }, 
            function(data, status){
                $('#imgQR').attr('src', '/file/qr?outtype=browser&content=' + base_url + '/mall/page?id=' + data.data.id);
                $('#btnSave').text('预 览');
                $('#savePageModal').modal('hide');
            }, 'json');
        localStorage.removeItem('page');
	});

	$('#preview').delegate('.list-group-item .del', 'click', function(){
        $(this).parent().fadeOut();
        $(this).parent().remove();
        $('#btnSave').text('保 存');
    });

    $('#preview').delegate('div[class="list-group-item"]', 'mouseover', function(){
        if($(this).attr('element-id') == component_element_id){
            return;
        }
        $(this).css('border', '1px dashed #2d78f4');
        $(this).find('.del').show();
    });

    $('#preview').delegate('div[class="list-group-item"]', 'mouseout', function(){
        if($(this).attr('element-id') == component_element_id){
            return;
        }

        $(this).css('border', '0px');
        $(this).find('.del').hide();
    });

    $('#preview').delegate('div[class="list-group-item"]', 'click', function(){
        $('#style').hide();
        $('#content').hide();
        if($(this).attr('data-setting').length < 1){
            return;
        }

        $('#preview').find('div[class="list-group-item"]').css('border', '0px');
        $(this).css('border', '2px dashed red');
        component_element_id = $(this).attr('element-id');

        $.get($(this).attr('data-setting'), 
            {
                'id': $(this).attr('pc-id') ? $(this).attr('pc-id') : 0
            },
            function(data, status){
                $('#settingPanel').html(data);
            }, 'html');
    });

    $('#preview, #components').sortable({
        connectWith: '.connectedSortable',
        stop:function(event, ui){
            if( ! current){
                return;
            }
            var page = localStorage.getItem('page');            
            if( ! page){
                page = '[]';
            }
            page = JSON.parse(page);
            page[page.length] = current;
            localStorage.setItem('page', JSON.stringify(page));
            current = '';

            $('#btnSave').text('保 存');
        }
    }).disableSelection();

    $('#components>.list-group-item').draggable({
        connectToSortable: "#preview",
        revert: "invalid",
        helper: function(){

            $('#btnSave').text('保 存');

            $('#htmlTemp').empty();

            var id = 'ele' + $(this).attr('data-id');
            $('#' + id).tmpl(null).appendTo('#htmlTemp');

            var eid = 'ele' + Date.parse(new Date());
            $('#htmlTemp').find('div[class="list-group-item"]').attr('element-id', eid);
            $('#htmlTemp').find('div[class="list-group-item"]').prepend('<a href="javascript:void(0);" class="del"><i class="fa fa-trash-o  fa-fw"></i></a>');            
            return $('#htmlTemp').html();
        }
    });
});